<template>
  <div class="login-container">
    <div
      class="box"
      style="
        height: 50px;
        margin: 0 auto;
        font-family: '楷体';
        text-align: center;
      "
    >
       <!-- <h1>
        <span class="el-icon-edit">&nbsp;&nbsp;</span>全&nbsp;部&nbsp;客&nbsp;户
      </h1>   -->
    </div>
    <div>
      <el-form  align="left" style="margin-top:5px; margin-bottom:5px"
 :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="客户编号"  style="margin-left:30px"
>
          <el-input  v-model="searchForm.userNum" placeholder="客户编号" />
        </el-form-item>
        <el-form-item style="margin-left:10px"
  label="姓名">
          <el-input   v-model="searchForm.userName" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="卡号" style="margin-left:10px"
>
          <el-input v-model="searchForm.cardNumber" placeholder="卡号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHandle" style="margin-left:10px"
>查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="list"
      :row-class-name="tableRowClassName"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="customerid"
        align="center"
        label="客户编号"
      />
  
      <el-table-column prop="name" align="center" label="姓名" />

      <el-table-column prop="sex" align="center" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex === 0"> 男 </span>
          <span v-if="scope.row.sex === 1"> 女 </span>
        </template>
      </el-table-column>

      <el-table-column prop="cardid" align="center" label="卡号" width="375px">
        <template slot-scope="scope">
          <div
            v-for="(sc, i) in scope.row.cuscards"
            :key="i"
            style="margin-top:10px"
          >
            <div style="float:left;width:50px">第{{ i + 1 }}张卡</div>
            <div v-if="sc.type === 1" style="float:left;width:150px;color:red">
              次卡
            </div>
            <div v-if="sc.type === 2" style="float:left;width:150px;color:red">
              八折卡
            </div>
            <div v-if="sc.type == 3" style="float:left;width:150px;color:red">
              七折卡
            </div>
            <div style="float:left;width:150px;font-size:18px">
              {{ sc.cardid }}
            </div>
            <div style="clear:both" />
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="phone" align="center" label="手机号" />
      <el-table-column
        prop="numcard"
        align="center"
        label="次卡数量(张)"
        width="200"
      />

      <el-table-column fixed="right" align="center" label="操作" width="200px">
        <template slot-scope="scope">
          <router-link :to="'/customer/detail/' + scope.row.customerid">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
            >查看详情</el-button
            >
          </router-link>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="deleteClick(scope.row.customerid)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  current-page="1"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="10"
  layout="total, sizes, prev, pager, next, jumper"
  :total="20"
  align="right"
>
    </el-pagination>

  </div>
</template>

<script>
import customer from '../../../api/customer'
export default {
  data() {
    return {
      list: null,
      count: 0,
      // 搜索信息
      searchForm: {
        userNum: '',
        userName: '',
        cardNumber: ''
      },
      pageSize:'10',
      currentPage:'1',

    }
  },
  created() {
    this.searchAllList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    searchAllList() {
      customer.searchAllList(this.currentPage,this.pageSize).then(response => {
        console.log(response.data)
        this.list = response.data
      })
    },
    handleClick(row) {
      customer.searchCustomer(row).then(response => {
        // this.$message({
        //   type: "success",
        //   message: "查询成功！",
        // })
        console.log(response.data)
        // this.list = response.data;
      })
    },

    // 查询方法
    searchHandle() {
      /*
        function fun(this.searchForm).then(res=>{
          res.data
        })
      */
    },

 // 页码切换
    handleCurrentChange(val){
      this.currentPage = val;
   customer.searchAllList(this.currentPage,this.pageSize).then((response) => {
      console.log(response.data.records)
    this.list= response.data;
      });
    },
    // 每页显示条目个数
    handleSizeChange(val){
      this.pageSize = val
     customer.searchAllList(this.currentPage,this.pageSize).then((response) => {
  this.list = response.data;
 
      });
    },



    deleteClick(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          customer.deleteCustomer(row).then(response => {
            this.searchAllList() // 重新获取列表
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      //       customer.deleteCustomer(row).then((response) =>{
      //         this.$message({
      //           type: "success",
      //           message: "删除成功！",
      //         });
      //       this.searchAllList();
      //     }).catch((error) => {
      //         this.$message.error('新增失败！');
      // });
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table{
  margin-bottom:30px ;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>
